<template lang="pug">
  .ratio
    .title 应用系统资源使用率
    .main
      .chart1(ref="chart")
      .chart2(ref="chart2")
      .m-btns
        .btn(:class="{active:Index===1}" @click="setMax") 最大
        .btn(:class="{active:Index===2}" @click="setMin") 最小
</template>
<script>
import { option } from '../components/charts'
export default {
  data () {
    return {
      Index: 1,
      name: ['政务服务网', '职称管理服务平台', '政务服务一站通', '智慧环保平台', '企业网上登记平台'],
      value: [20, 40, 60, 80, 99]
    }
  },
  mounted () {
    this.getChart1()
    this.getChart2()
  },
  methods: {
    setMax () {
      this.Index = 1
      this.value.sort((a, b) => {
        return a - b
      })
      this.name.reverse()
      this.getChart1()
      this.getChart2()
    },
    setMin () {
      this.Index = 2
      this.value.sort((a, b) => {
        return b - a
      })
      this.name.reverse()
      this.getChart1()
      this.getChart2()
    },
    getChart1 () {
      let color = ['#102467', '#4f336d', '#f1ed4e']
      this.$echarts.init(this.$refs.chart).setOption(option(this.name, this.value, color))
    },
    getChart2 () {
      let color = ['#04345d', '#6842a9', '#cd4ff6']
      this.$echarts.init(this.$refs.chart2).setOption(option(this.name, this.value, color))
    }
  }
}
</script>

<style lang="stylus" scoped>
  .ratio
    height 366px
    background-color: #09153d;
    box-shadow: 0px 1px 2px 0px rgba(9, 14, 33, 0.75);
    .title
      padding 0 15px
      height 32px
      line-height @height
      background-color #041646
      font-size 14px
    .main
      position relative
      .chart1
        height 200px
        position absolute
        width 80%
      .chart2
        margin-top 160px
        position absolute
        height 200px
        width 80%
      .m-btns
        position absolute
        top 104px
        right 45px
        .btn
          width 53px
          height 20px
          line-height @height
          text-align center
          border solid 1px #263a7c
          border-radius 2px
          margin-bottom 22px
          color  #fefefe
          font-size 14px
          cursor pointer
          &.active
            background-color: #025bbf;
            border 1px solid #09153d
</style>
